<template>
  <van-tabbar
    class="footBar"
    v-model="activeItem"
    v-on:click="clickIcon"
    @change="changeItem"
  >
    <van-tabbar-item name="home" icon="home-o">主页</van-tabbar-item>
    <van-tabbar-item name="weather" icon="fire-o">天气</van-tabbar-item>
    <!-- <van-tabbar-item name="service" icon="qr">业务</van-tabbar-item> -->
    <van-tabbar-item name="reservation" icon="notes-o">预约</van-tabbar-item>
    <van-tabbar-item name="mine" icon="user-circle-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script>
import * as SERVICE from '../utils/service'
export default {
  data() {
    return {
      activeItem: 'home', //设置默认显示主页——地图页面
    }
  },
  mounted() {},
  methods: {
    clickIcon() {
      console.log('111')
    },
    changeItem(event) {
      // event.detail 的值为当前选中项的索引

      switch (event) {
        case 'weather': {
          console.log(event)
          this.$store.dispatch('setIsShowUserCenter', false) //隐藏个人中心
          this.$store.dispatch('setIsShowWeatherPage', true) //显示天气页面

          break
        }
        // case 'service': {
        //   console.log(event)
        //   this.$store.dispatch('setIsShowWeatherPage', false)
        //   break
        // }
        case 'home': {
          console.log(event)
          this.$store.dispatch('setIsShowUserCenter', false) //隐藏个人中心
          this.$store.dispatch('setIsShowWeatherPage', false) //隐藏天气页面
          this.$store.dispatch('setIsShowReservation', false) //隐藏预约模块
          break
        }
        case 'reservation': {
          console.log(event)
          this.$store.dispatch('setIsShowUserCenter', false) //隐藏个人中心
          this.$store.dispatch('setIsShowWeatherPage', false) //隐藏天气页面
          this.$store.dispatch('setIsShowReservation', true) //显示预约模块
          break
        }
        case 'mine': {
          console.log(event)

          this.$store.dispatch('setIsShowWeatherPage', false) //隐藏天气页面
          this.$store.dispatch('setIsShowReservation', false) //隐藏预约模块
          this.$store.dispatch('setIsShowUserCenter', true) //显示个人中心
          break
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.footBar {
  background-color: #fff !important;
  border-top: 1px solid skyblue !important;
  // border-bottom: 1px solid blue !important;
  z-index: 9999;
}
</style>
